import style from "../assets/css/detail.module.css";
import moment from "moment";
import { Image, Button, Ellipsis } from "antd-mobile/2x";
import {
  MoreOutline,
  StarFill,
  SmileOutline,
  FrownOutline,
  FillinOutline,
} from "antd-mobile-icons";
import { connect } from "react-redux";

const Pingjia = (props) => {
  const demoSrc = "https://fakeimg.pl/250x100/ededed/333";

  const content =
    "《金铲铲之战》是英雄联盟云顶之弈正版授权的自动战斗品类手游，每局比赛由八名玩家共同进行一场各自为战的博弈对抗，玩家通过招兵买马，融合英雄，提升战力，排兵布阵，成为最终立于战场上的赢家。";

  return (
    <div className={style.pingjia}>
      <div className={style.id}>
        <div className={style.grxx}>
          <Image
            src={
              "https://portrait.gitee.com/uploads/avatars/user/3259/9778472_ren-yaqi_1632450006.png!avatar30"
            }
            width={42}
            height={42}
            fit="cover"
            style={{ borderRadius: 32, marginRight: 10 }}
          />
          <div className={style.mz}>{props.name}</div>
          <Button
            color="danger"
            size="mini"
            style={{ fontSize: "12px", marginLeft: 10 }}
          >
            热门评论
          </Button>
        </div>
        <div className={style.right}>
          <StarFill style={{ color: "#ffd21e" }} />
          <StarFill style={{ color: "#ffd21e" }} />
          <StarFill style={{ color: "#ffd21e" }} />
          <StarFill style={{ color: "#ffd21e" }} />
          <StarFill style={{ color: "#ffd21e" }} />
          <MoreOutline />
        </div>
      </div>

      <div className={style.plnr}>
        <Ellipsis
          direction="end"
          rows={3}
          content={content}
          expandText="展开"
          collapseText="收起"
        />
      </div>

      <div className={style.date}>
        {moment().format("YYYY-MM-DD")}
        <div className={style.good}>
          <SmileOutline
            style={{
              color: "#0080ff",
              fontSize: "20px",
              marginRight: 10,
            }}
          />
          <FrownOutline style={{ fontSize: "20px", marginRight: 10 }} />
          <FillinOutline style={{ fontSize: "20px", marginRight: 10 }} />
        </div>
      </div>
    </div>
  );
};
const mapStateToProps = (state) => {
  return state;
};

export default connect(mapStateToProps)(Pingjia);
